<template>
<!--    登录-->
    <div class="box">
        <div class="loginbox" v-if="!flag">
            <h4 style="margin-bottom: 20px">登录</h4>
            <el-input
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-user"
                    v-model="username"
                    style="margin-bottom: 20px"
            >
            </el-input>
            <el-input
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                    v-model="password"
                    style="margin-bottom: 10px"
            >
            </el-input>
            <div @click="forget">
                <el-button type="text" style="float: right;margin-bottom: 10px;color: red">忘记密码</el-button>
            </div>
            <div @click="login">
                <el-button style="width: 100%" type="primary">登录</el-button>
            </div>
        </div>
        <div class="loginbox" v-if="flag">
            <h4 style="margin-bottom: 20px">忘记密码</h4>
            <el-input
                    placeholder="请输入学号"
                    prefix-icon="el-icon-user"
                    v-model="student_id"
                    style="margin-bottom: 20px"
            >
            </el-input>
            <el-input
                    placeholder="请输入姓名"
                    prefix-icon="el-icon-user"
                    v-model="user_name"
                    style="margin-bottom: 20px"
            >
            </el-input>
            <el-input
                    placeholder="请输入身份号"
                    prefix-icon="el-icon-user"
                    v-model="id_card"
                    style="margin-bottom: 20px"
            >
            </el-input>
            <el-input
                    type="password"
                    placeholder="请输入新密码"
                    prefix-icon="el-icon-lock"
                    v-model="newPwd"
                    style="margin-bottom: 20px"
            >
            </el-input>
            <div style="display: flex;justify-content: space-around">
                <el-button  @click="quxiao">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </div>
        </div>

    </div>
</template>

<script>
    import {userLogin, forgetpassword} from '../api/api'
    export default {
        name: "login",
        data(){
            return {
                username:'',
                password:'',
                student_id:'',
                newPwd:'',
                user_name:'',
                id_card:'',
                flag: false
            }
        },
        methods:{
            login(){
                userLogin(this.username, this.password).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        sessionStorage.setItem('token',res.token)
                        this.$router.push('/index')
                    }else {
                        this.$message({
                            message: '用户名或密码错误',
                            type: 'error'
                        });
                    }
                })
            },
            forget(){
                this.flag = true
            },
            quxiao(){
                this.flag = false
            },
            confirm(){
                forgetpassword(this.student_id, this.user_name, this.id_card, this.newPwd).then(res=>{
                    if(res.status == 0){
                        // console.log(res)
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.flag = false
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .box {
        width: 100%;
        height: 100vh;
        background-image: url("../assets/images/index.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .loginbox {
        position: fixed;
        right: 20%;
        top: 20%;
        padding: 20px;
        background-color: white;
        width: 300px;
        border-radius: 10px;
    }
</style>
